<template>
    <div>
        <h1>toRaw() & unref() & markRaw()</h1>
        <h3>markRaw()
            将一个对象标记为不可被转为代理。返回该对象本身。</h3>

        <div class="group">
            <button type="button" @click="editMarkRaw">修改markRaw</button>
        </div>
        <div class="group">
            {{ slrefdataObj3.count }}
        </div>
        <div class="group">
            <ul>
                <li v-for="item in slrefdataObj3.strArr" :key="item">{{ item }}</li>
            </ul>
        </div>
        <div class="group">
            <ul>
                <li v-for="(key, value) in slrefdataObj3.user" :key="value">{{ value }} : {{ key }}</li>
            </ul>
        </div>
        <div class="group">
            <ul>
                <li v-for="item in slrefdataObj3.markFoo" :key="item">{{ item }}</li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo38'
}
</script>

<script script setup lang='ts'>
import { isReactive, markRaw, reactive } from 'vue';


// markRaw()
// 将一个对象标记为不可被转为代理。返回该对象本身。

const foo = markRaw([123, 345, 656, 78, 345])
console.log(isReactive(reactive(foo)));  // false

let dataObj3 = {
    count: 0,
    strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
    user: {
        name: '许家印',
        sex: 'nan',
        age: 42,
        aihao: {}
    }
}

let slrefdataObj3 = reactive({
    ...dataObj3,
    markFoo: foo
})


const editMarkRaw = () => {
    // 以下属性都有响应性，测试的时候不要和 非响应性的 markFoo 在一起测试，否则会触发非相关属性渲染
    // slrefdataObj3.count++
    // slrefdataObj3.strArr.push('123')
    // slrefdataObj3.user.name = '周杰伦'

    // 非响应性
    slrefdataObj3.markFoo.push(99999)
    console.log(slrefdataObj3.markFoo);

}


</script>

<style lang="scss" scoped>
.group {
    padding: 20px;
    border: 2px solid #abcdef;
    margin: 10px 0;
}
</style>
